<template>
  <article>
    <nuxt-content
      class="prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto"
      :document="article"
    />
    <!-- <pre> {{ article }} </pre> -->
    <!-- <p>Article last updated: {{ formatDate(article.updatedAt) }}</p>
 <p>{{ article.description }}</p>
 <div class="p-4 mb-4 text-white bg-blue-500">
  This is HTML inside markdown that has a class of note
</div> -->
  </article>
</template>

<script>
import Prism from 'prismjs';

export default {
  async asyncData({ $content, params }) {
    const article = await $content('articles', params.article).fetch();
    return { article };
  },
  methods: {
    formatDate(date) {
      const options = { year: 'numeric', month: 'long', day: 'numeric' };
      return new Date(date).toLocaleDateString('en', options);
    },
  },
  mounted() {
  },
};
</script>
